<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="order by dede58.com"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>小米商城-个人中心</title>

    <script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.0/css/bootstrap.min.css">

    <script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        .banner_e_x {
            width: 1226px;
            height: 100px;
            display: block;
            margin-left: 9.6%;
        }

        .banner_e_x .wdgwc {
            height: 100px;
            line-height: 100px;
            font-weight: bold;
            font-size: 24px;
        }

        .banner_e_x .logo {
            background: url(../../image/logo_top.png) no-repeat center center;
            width: 50px;
            height: 100px;
        }

        .banner_e_x .wxts {
            height: 90px;
            line-height: 105px;
            font-size: 12px;
            color: #777;
        }

        .banner_e_x .dlzc ul li a {
            line-height: 100px;
            display: block;
            padding: 0 8px;
            font-size: 12px;
            font-family: Times New Roman;
            color: #777;
        }

        .banner_e_x .dlzc ul li {
            float: left;
            font-size: 12px;
            line-height: 100px
        }

        .margin {
            line-height: 2;
        }

        #addAddress:hover {
            cursor: pointer;
            border: 2px dashed #4d4a4a !important;

        }

        #addAddress:hover li {
            cursor: pointer;
            background: #4a4846 !important;

        }

        #addAddress:hover p {
            cursor: pointer;
            color: #4a4846 !important;

        }

        .shippingSelected {
            border: 2px dashed #ff6709 !important;
        }

        .shippings {
            float: left;
            margin-left: 3%;
            width: 270px;
            height: 180px;
            border: 2px dashed #ccc;
            margin-top: 2%;
        }

        .shippings:hover {
            cursor: pointer;
            border: 2px dashed #ff6709 !important;
        }

        .jiahao {
            margin-left: 24%;
            color: #FFF;
            font-size: 30px;
            margin-top: -5px;
            position: absolute;
        }

        .xinzeng {
            position: absolute;
            margin-top: 130%;
            color: #b0b0b0;
            margin-left: -96%;
            width: 110px;
        }

        .address {

            float: left;
            margin-left: 3%;
            width: 270px;
            height: 180px;
            border: 2px dashed #ccc;
            margin-top: 2%;
        }

        .editAddress {
            color: #ff6700;
            float: right;
            display: none;
            margin-right: 4%;
        }

        .deleteAddress {
            color: #ff6700;
            float: left;
            display: none;
            margin-left: 4%;
        }

        .shippings:hover #editAddress {
            display: block;
        }

        .shippings:hover #deleteAddress {
            display: block;
        }
    </style>
</head>
<body>
<div style="margin: 0 auto; width: 1226px;">

<@common.cart_head/>
    <div style="background-color: #f5f5f5;  border-top: 2px solid red;">
        <div style="background-color: #FFF;  width: 1266px; margin-top: 3%; margin-left: 146px;">

            <h3 style="font-size: 22px; font-weight: normal; color: #616161; margin-left: 3%; padding-top: 3%;">收货地址</h3>
            <div id="shippings">
            <#if shippings?exists >
                <#list shippings as shipping>
                <div class="shippings">
                    <input id="shippingId" type="hidden" value="${shipping.shippingId}">
                    <dl>
                        <dt style="padding: 4% 8% 0 8%;font-size: 18px;color: #333;font-style: normal;line-height: 50px;">${shipping.receiverName}</dt>
                        <dt style="line-height: 22px;color: #757575; padding: 0 8% 0 8%;">${shipping.receiverPhone?c}</dt>
                        <dt style="line-height: 22px;height: 50px;color: #757575; padding: 0 8% 0 8%;">${shipping.provinceName} ${shipping.cityName} ${shipping.distractName}  ${shipping.receiverAddress}</dt>
                    </dl>
                    <span id="deleteAddress" class="deleteAddress">删除</span>
                    <span id="editAddress" data-toggle="modal" data-target="#myModal2" class="editAddress">修改</span>
                </div>
                </#list>
                <div id="addAddress" data-toggle="modal" data-target="#myModal" class="address">
                    <li style=" position: relative;height: 32px;width: 32px;background: #e0e0e0;border-radius: 16px; margin: 22% auto">
                        <span class="jiahao">+</span>
                        <p class="xinzeng"> 新增收货地址</p>
                    </li>
                </div>
            <#else >
                 <div id="addAddress" data-toggle="modal" data-target="#myModal" class="address">
                     <li style=" position: relative;height: 32px;width: 32px;background: #e0e0e0;border-radius: 16px; margin: 22% auto">
                         <span class="jiahao">+</span>
                         <p class="xinzeng"> 新增收货地址</p>
                     </li>
                 </div>
            </#if>
            </div>
            <div>
                <h3 style=" line-height: 40px;font-size: 20px; font-weight: normal; color: #616161; margin-left: 3%; margin-top: 16%; padding-top: 3%;">
                    商品明细</h3>
                <div style="width: 94%; margin-left: 3%;  border-top: 1px solid #e0e0e0;border-bottom: 1px solid #e0e0e0; ">
                    <ul>
                    <#list cartItems as cartItem>
                        <li style="margin-bottom: 3%;margin-top: 2%">
                            <div style="height: 40px;">
                                <img style=" height: 60px; width: 60px; float: left;" src="${cartItem.productImg}"
                                     alt="">
                                <span style="color: #424242;font-size: 14px; line-height: 62px;margin-left: 2%;">小米8 青春 ${cartItem.productName} ${cartItem.colorName}</span>
                                <span style="float: right; margin-right: 4%;line-height: 62px;  color: #ff6700;">${cartItem.productTotalPrice?c}元</span>
                                <span style="float: right;line-height: 62px;  margin-right: 26%;">${cartItem.productPrice?c} x ${cartItem.quantity}</span>
                            </div>

                        </li>
                    </#list>

                    </ul>
                </div>
                <div style="line-height: 90px;margin: 0 3% 3% 3%;  border-bottom: 1px solid #e0e0e0; font-size: 18px;">配送方式
                    <span style=" font-size: 14px;   color: #ff6700;margin-left: 10%;">包邮</span>
                </div>
                <div style="height: 240px; ">
                    <div style="height: 240px;width: 180px;  float: right; margin-right: 2.5%;">
                        <ul>
                            <li class="margin">
                                <label style="float: left;    width: 90px; color: #757575; zoom: 1;">商品件数：</label>
                                <span style="float: right;    color: #ff6700;">${cartItems?size}件</span>
                            </li>
                            <li class="margin">
                                <label style="float: left; width: 92px; color: #757575; zoom: 1;">商品总价：</label>
                                <span style="float: right;color: #ff6700;">${totalPrice?c}元</span>
                            </li>
                            <li class="margin">
                                <label style="float: left; width: 90px; color: #757575; zoom: 1;">活动优惠：</label>
                                <span style="float: right;color: #ff6700;">-0元</span>
                            </li>

                            <li class="margin">
                                <label style="float: left; width: 100px; color: #757575; zoom: 1;">优惠卷抵扣：</label>
                                <span style="float: right;color: #ff6700;">-0元</span>
                            </li>
                            <li class="margin">
                                <label style="float: left; width: 100px; color: #757575; zoom: 1;">运费：</label>
                                <span style="float: right;color: #ff6700;">-0元</span>
                            </li>
                            <li class="margin">
                                <label style="float: left; width: 90px; color: #757575; zoom: 1;">应付总额：</label>
                                <span style="float: right;color: #ff6700;">${totalPrice?c}元</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div style="height: 100px; border-top: 1px solid red; ">
                    <div id="balance"
                         style="width: 158px; float: right;background: #ff6700;color: #fff;height: 38px;padding: 0;margin: 30px;border: 1px solid #b0b0b0;font-size: 14px;line-height: 38px;text-align: center;cursor: pointer;">
                        结算
                    </div>
                </div>
                <div style="height: 60px; background-color:#f5f5f5;"></divs>
                </div>
            </div>
        </div>


    </div>




    <div class="modal fade" tabindex="-1" id="myModal" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="gridSystemModalLabel">新增收货地址</h4>
                </div>
                <form action="/shipping/addShipping" method="get">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="row">

                                    <div class="col-xs-12 col-sm-12">
                                        <label id="" for="exampleInputName2">收件人：</label>
                                        <input type="text" class="form-control" id="receiver_name" name="receiverName"/>
                                    </div>
                                    <div class="col-xs-12 col-sm-12">
                                        <label id="" for="exampleInputName2">电话：</label>
                                        <input type="text" class="form-control" id="receiver_phone" name="receiverPhone"/>
                                    </div>

                                    <div class="col-xs-4 col-sm-4">
                                        <label for="exampleInputName2">省份:</label>
                                        <select name="receiverProvince" id="receiver_province" class="form-control">
                                            <option value="-1">请选择</option>
                                    <#list provinceList as provinceList>
                                    <option value="${provinceList.provinceId}">${provinceList.provinceName}</option>
                                    </#list>
                                        </select>
                                    </div>

                                    <div class="col-xs-4 col-sm-4">
                                        <label for="exampleInputName2">城市:</label>
                                        <select name="receiverCity" id="receiver_city" class="form-control">
                                            <option value="-1">请选择</option>
                                        </select>
                                    </div>

                                    <div class="col-xs-4 col-sm-4">
                                        <label for="exampleInputName2">区县:</label>
                                        <select name="receiverDistract" id="receiver_distract" class="form-control">
                                            <option value="-1">请选择</option>

                                        </select>
                                    </div>

                                    <div class="col-xs-12 col-sm-12">
                                        <label for="exampleInputName2">详细位置:</label>
                                        <input name="receiverAddress" type="text" class="form-control" id="receiver_address"
                                               placeholder="例：--街道--小区--楼--号">
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="submit"  id="newAdd" class="btn btn-primary">新增</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" tabindex="-1" id="myModal2" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="gridSystemModalLabel">修改收货地址</h4>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-sm-9">
                            <div class="row">

                                <div class="col-xs-12 col-sm-12">
                                    <label id="" for="exampleInputName2">收件人：</label>
                                    <input type="text" class="form-control" id="receiver_name_2" name="receiverName_2"/>
                                </div>
                                <div class="col-xs-12 col-sm-12">
                                    <label id="" for="exampleInputName2">电话：</label>
                                    <input type="text" class="form-control" id="receiver_phone_2" name="receiverPhone_2" value="区分电话"/>
                                </div>

                                <div class="col-xs-4 col-sm-4">
                                    <label for="exampleInputName2">省份:</label>
                                    <select name="receiverProvince_2" id="receiver_province_2" class="form-control">
                                        <option value="-11">请选择</option>
                                    <#list provinceList as provinceList>
                                    <option value="${provinceList.provinceId}">${provinceList.provinceName}</option>
                                    </#list>
                                    </select>
                                </div>

                                <div class="col-xs-4 col-sm-4">
                                    <label for="exampleInputName2">城市:</label>
                                    <select name="receiverCity_2" id="receiver_city_2" class="form-control">
                                        <option value="-11">请选择</option>
                                    </select>
                                </div>

                                <div class="col-xs-4 col-sm-4">
                                    <label for="exampleInputName2">区县:</label>
                                    <select name="receiverDistract_2" id="receiver_distract_2" class="form-control">
                                        <option value="-11">请选择</option>

                                    </select>
                                </div>

                                <div class="col-xs-12 col-sm-12">
                                    <label for="exampleInputName2">详细位置:</label>
                                    <input name="receiverAddress_2" type="text" class="form-control" id="receiver_address_2"
                                           placeholder="例：--街道--小区--楼--号">
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit"  id="newAdd_2" class="btn btn-primary">修改</button>
                </div>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
<@common.footer/>
</div>
</body>


<script type="text/javascript" src='/js/jquery-3.3.1.js'></script>
<script type="application/javascript">

    $(document).ready(function () {
        var shippingId;
        // 清除同胞样式
        $("#shippings").on('click', '.shippings', function () {
            $(this).addClass("shippingSelected");
            $(this).siblings().removeClass("shippingSelected");
            shippingId = $(this).find("#shippingId").val();

        });


        // 根据省份的获取城市
        $("#receiver_province").bind("change", function () {
            // 清空城市文本框内容
            $("#receiver_city").empty();
            // 清空区县文本框内容
            $("#receiver_distract").empty();
            var provinceId = $(this).val();
            $.ajax({
                url: '/shipping/getCity?provinceId=' + provinceId,
                success: function (result) {
                    $(" <option></option>").val(-11).append("请选择").appendTo("#receiver_city")
                    $.each(result.data, function (index, item) {
                        var cityId = item.cityId;
                        var cityName = item.cityName;
                        $(" <option></option>").val(cityId).append(cityName).appendTo("#receiver_city")
                    });
                }
            });
        });

        // 根据城市获取区县
        $("#receiver_city").bind("change", function () {
            var cityId = $(this).val()//获取option的value
            // 清空区县文本框内容
            $("#receiver_distract").empty();
            $.ajax({
                url: '/shipping/getDistract?cityId=' + cityId,
                success: function (result) {
                    $(" <option></option>").val(-11).append("请选择").appendTo("#receiver_distract")
                    $.each(result.data, function (index, item) {
                        var distractId = item.distractId;
                        var distractName = item.distractName;
                        $(" <option></option>").val(distractId).append(distractName).appendTo("#receiver_distract")
                    });
                }
            });
        });


        // 修改收货地址
        $("#shippings").on('click', "#editAddress", function () {

            shippingId = $(this).prevAll("#shippingId").val();
            alert(shippingId)
            $.ajax({
                url:'/shipping/getDetail?shippingId=' + shippingId,
                success:function (result) {
                    var item = result.data;
                    // console.log(item)
                    $("#receiver_name_2").val(item.receiverName);
                    $("#receiver_phone_2").val(item.receiverPhone);
                    $("#receiver_address_2").val(item.receiverAddress);
                }
            });

            // 再次获取地市
            $("#receiver_province_2").bind("change", function () {
                // 清空城市文本框内容
                $("#receiver_city_2").empty();
                // 清空区县文本框内容
                $("#receiver_distract_2").empty();
                var provinceId = $(this).val();

                $.ajax({
                    url: '/shipping/getCity?provinceId=' + provinceId,
                    success: function (result) {
                        $(" <option></option>").val(-11).append("请选择").appendTo("#receiver_city_2")
                        $.each(result.data, function (index, item) {
                            var cityId = item.cityId;
                            var cityName = item.cityName;
                            $(" <option></option>").val(cityId).append(cityName).appendTo("#receiver_city_2")
                        });
                    }
                });
            });

            // 根据城市获取区县
            $("#receiver_city_2").bind("change", function () {
                var cityId = $(this).val()//获取option的value
                // 清空区县文本框内容
                $("#receiver_distract_2").empty();
                $.ajax({
                    url: '/shipping/getDistract?cityId=' + cityId,
                    success: function (result) {
                        $(" <option></option>").val(-11).append("请选择").appendTo("#receiver_distract_2")
                        $.each(result.data, function (index, item) {
                            var distractId = item.distractId;
                            var distractName = item.distractName;
                            $(" <option></option>").val(distractId).append(distractName).appendTo("#receiver_distract_2")
                        });
                    }
                });
            });

        });



        // 新增收货地址
        $("#newAdd").click(function () {
            var city = $("#receiver_city").val();
            alert("city:" + city);
            // 省份编码
            var province = $("#receiver_province").val();
            alert("province:" + province);
            // 区县编码
            var distract = $("#receiver_distract").val();
            alert("distract:" + distract);
            // 收货人姓名
            var username = $("#receiver_name").val();
            alert("username:" + username);
            // 电话
            var phone = $("#receiver_phone").val();
            alert("phone:" + phone);
            // 详细地址
            var address = $("#receiver_address").val();
            alert("address:" + address)
            if (city < 0) {
                alert("请选择城市");
                return false;
            }
            if (province < 0) {
                alert("请选择省份");
                return false;
            }
            if (distract < 0) {
                alert("请选择街道");
                return false;
            }

            $.ajax({
                url:'/shipping/addShipping?receiverName=' + username +'&receiverPhone=' + phone + '&receiverProvince=' + province + '&receiverCity=' + city + "&receiverDistract=" + distract + "&receiverAddress=" + address,
                success:function (result) {
                    if (result.status == 0) {
                        window.location.href='/order/confirmOrder';
                        return;
                    }
                    if (result.status == -100) {
                        alert("删除失败");
                        return;
                    }
                }
            });
        });

        // 提交修改收货地址
        $("#newAdd_2").click(function () {
            // 城市编码
            var city = $("#receiver_city_2").val();
            // alert("city:" + city);
            // 省份编码
            var province = $("#receiver_province_2").val();
            // alert("province:" + province);
            // 区县编码
            var distract = $("#receiver_distract_2").val();
            // alert("distract:" + distract);
            // 收货人姓名
            var username = $("#receiver_name_2").val();
            // alert("username:" + username);
            // 电话
            var phone = $("#receiver_phone_2").val();
            // alert("phone:" + phone);
            // 详细地址
            var address = $("#receiver_address_2").val();
            // alert("address:" + address)
            if (city < 0) {
                alert("请选择城市");
                return false;
            }
            if (province < 0) {
                alert("请选择省份");
                return false;
            }
            if (distract < 0) {
                alert("请选择街道");
                return false;
            }
            // 发送更改请求
            $.ajax({
                url:"/shipping/editShipping?shippingId="+shippingId + "&receiverName=" + username + "&receiverPhone=" + phone + "&receiverProvince=" + province + "&receiverCity=" + city + "&receiverDistract=" + distract + "&receiverAddress=" + address,
                success:function (result) {
                    console.log(result.data)
                    window.location.href='/order/confirmOrder'
                }
            });
        });


        // 删除收货地址
        $("#shippings").on('click', "#deleteAddress", function () {
            shippingId = $(this).prevAll("#shippingId").val();
            $.ajax({
                url: '/shipping/deleteShipping?shippingId=' + shippingId,
                success: function (result) {
                    if (result.status == 0) {
                        window.location.href = '/order/confirmOrder';
                        return;
                    }
                    if (result.status == -100) {
                        alert("删除失败");
                        return;
                    }
                }
            });
        });


        $("#balance").click(function () {
            $.ajax({
                url:'/order/createOrder?shippingId=' + shippingId,
                success:function (result) {
                    if (result.status == -100) {
                        alert("请先进行登录");
                        return false;
                    }
                    window.location.href = '/order/page/orderDetail?orderNo=' + result.data;
                }
            });
        });
    });

</script>

</html>